<template>
  <div class="temperature">
    <div class="index-content">
     <router-link to="/airInfo">返回 &nbsp; &nbsp; </router-link>
      <div class="title">当前温度:{{this.$store.state.airInfo.airhInfo['temperature']?this.$store.state.airInfo.airhInfo['temperature']:' --'}}℃</div>
        <br/><br/>
         <!--为echarts准备一个具备大小的容器dom-->
        <div id="main" style=""></div>
    </div>
   </div>
</template>
<script>
import {getOneInfo,getSevenData} from "@/api";
import { mapGetters, mapState} from "vuex";
import * as echarts from 'echarts';
import { Toast } from 'vant';
export default {
  name: "temperature",
  components: {},
  data() {
    const a=this.option
    return {
      temperature:'',
      charts: '',
      option : {
      title: {
        text: '近七天  \n温度详情',
        textStyle:{
        fontSize:'16',
        color:'#27BA9B'
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {},
      toolbox: {
        show: true,
        top: 25,
        right:5,
        // left: 230, 
        feature: {
          // dataZoom: {
          //   yAxisIndex: 'none'
          // },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          // restore: {},
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} °C'
        },
      },
      series: [
        {
          name: 'Highest',
          type: 'line',
          data: [16,23,22,18,27,19,21],
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          },
        },
        {
          name: 'Lowest',
          type: 'line',
          data: [2,3,-2,4,-1,-3,3],
          markPoint: {
            // data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
          },
          markLine: {
            data: [
              { type: 'average', name: 'Avg' },
              [
                {
                  symbol: 'none',
                  x: '90%',
                  yAxis: 'max'
                },
                {
                  symbol: 'circle',
                  label: {
                    position: 'start',
                    formatter: 'Max'
                  },
                  type: 'max',
                  name: '最高点'
                }
              ]
            ],
          }
        }
      ]
    },
  }
},
  mounted(){
    this.$nextTick(function() {
      this.drawLine('main')
    }),
    this.SevenData();
    // this.getRecentlyInfo();
    this.toast();
    this.fnDate();
  },
  computed: {...mapGetters(['airInfo'])},
  methods:{
  //获取近七天的最高温和最低温
   async SevenData(){
    let parmas={ field:'temperature'}
    const result =await getSevenData(parmas.field);
    console.log(result);
    // result.high.pop();
    // result.low.pop();
    let highArr = result.high.map(Number);
    let lowArr = result.low.map(Number);
    this.option.series[0].data=highArr;
    this.option.series[1].data=lowArr;
    this.charts.setOption(this.option);
    },
  //统计图
  drawLine(id) {
    this.charts = echarts.init(document.getElementById(id));
    this.charts.setOption(this.option);
  },
  //提示信息
  toast(){
    let NowInfo=this.$store.state.airInfo.airhInfo['temperature'];
    if(NowInfo<16){
      Toast('当前室内温度较低,注意保暖嗷！');
      }else if(NowInfo>26){
      Toast('当前室内温度较高,注意通风！');
      }else{
      Toast('当前室内温度良好！');
      }
    },
    //js 获取当前时间
    fnDate() {
      var date = new Date();
      var month = date.getMonth(); //当前月份
      var one = this.getDay(-1); 
      var two = this.getDay(-2); 
      var three = this.getDay(-3); 
      var four = this.getDay(-4); 
      var five = this.getDay(-5); 
      var six = this.getDay(-6); 
      var seven = this.getDay(-7); 
      let allArr = []
      allArr.push(seven,six,five,four,three,two,one)
      allArr.join(',')
      this.option.xAxis.data=allArr;
      this.option.xAxis.data=allArr;
      this.$nextTick(function() {
      this.drawLine('main')
      })
    },
    //获取近7天的日期
    getDay(day){
    var today = new Date();
    var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
    today.setTime(targetday_milliseconds); //注意，这行是关键代码
    // var tYear = today.getFullYear();
    var tMonth = today.getMonth();
    var tDate = today.getDate();
    tMonth = this.fnW(tMonth + 1);
    tDate = this.fnW(tDate);
    return tMonth+"-"+tDate;
  },
  //补位 当某个字段不是两位数时补0
  fnW(str) {
    var num;
    str > 9 ? (num = str) : (num = "0" + str);
    return num;
  },
  }
}
</script>
<style scoped lang='less'>
.temperature{
  width: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  background-color:black;
  color: @airColor;
  background-image:url( "../../assets/images/bg.png" );
  .index-content{
  color: @airColor;
  width: 100%;
  height: 700px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  .title{
    font-size: 24px;
    font-weight: 800;
  }
  a{
  font-size: 20px;
  padding-left: 10px; ;
  color: #fff;
  text-align: center;
  border-radius:0px 16px 16px 0px ;
  background-color:@airColor ;
  }
  #main{
    width: 95%;
    height: 600px;
    position: relative;
    left: 50%;
    transform: translate(-50%);
  }
  }
}
</style>